﻿<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>Suruchi - Fashion eCommerce HTML Template - shared on themelock.com</title>
  <meta name="description" content="Morden Bootstrap HTML5 Template">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="shortcut icon" type="image/x-icon" href="assets/img/favicon.ico">
    
   <!-- ======= All CSS Plugins here ======== -->
  <link rel="stylesheet" href="assets/css/vendor/bootstrap.min.css">
  <link rel="stylesheet" href="assets/css/icofont.min.css">
  <link rel="stylesheet" href="assets/css/plugins/animate.css">
  <link rel="stylesheet" href="assets/css/plugins/mmenu.css">
  <link rel="stylesheet" href="assets/css/plugins/glightbox.min.css">
  
  <!-- Custom Style CSS -->
  <link rel="stylesheet" href="assets/css/style.css">

  <!-- Modernizr JS -->
  <script src="assets/js/vendor/modernizr-3.11.2.min.js"></script>
</head>

<body class="html__body">
    <!-- mobile menu start -->
    <nav class="panel-menu navbar_mobile_menu">
        <div class="mm-navbtn-names">
			<div class="mm-closebtn"> <i class="icofont-close"></i> CLOSE</div>
		</div>
		<ul>
            <li class="doc__header--menu__items"><a target="_blank" class="doc__header--menu__link" href="#docSupport">Request Support</a></li>
            <li class="doc__header--menu__items"><a target="_blank" class="doc__header--menu__link" href="http://www.bootstrapmb.com">Theme Live Demo</a></li>
 
        </ul>
	</nav>
    <!-- mobile menu end -->

    <!-- Start header area -->
    <header class="doc__header header__transparent sticky__header">
        <div class="container-fluid width-calc">
            <div class="row">
                <div class="col-12">
                    <div class="doc__header--inner d-flex justify-content-between align-items-center">
                        <div class="doc__header--logo">
                            <a href="#"><img class="doc__header--logo__img" src="assets/img/logo/nav-log.png" alt=""></a>
                        </div>
                        <div class="doc__header--menu d-flex align-items-center">
                            <label class="switch">
                                <input type="checkbox" id="togBtn" onclick="darkMode()">
                                <div class="slider round">
                                    <!--ADDED HTML -->
                                    <span class="on"><i class="icofont-sun"></i> </span>
                                    <span class="off"><i class="icofont-moon"></i></span>
                                    <!--END-->
                                </div>
                            </label>
                            <ul class="d-flex align-items-center">
 
                                <li class="doc__header--menu__items"><a target="_blank" class="doc__header--menu__link" href="http://www.bootstrapmb.com">Theme Live Demo</a></li>
                               
                            </ul>
                        </div>
                        <div class="mobile__menu--open">
                            <a class="mobile__menu--open__icon" href="javascript:void(0)"><i class="icofont-navigation-menu"></i></a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </header>
    <!-- End header area -->

   <!-- Start doc body -->
   <section class="doc__body--area">
        <div class="container-fluid width-calc">
            <div class="row">
                <div class="col-12">
                    <div class="doc__body--container d-flex">
                        <div class="doc__sidebar doc__nav">
                            <div class="doc__sidebar--inner">
                                <h3 class="doc__nav--title">Suruchi Navigation</h3>
                                <div class="doc__nav--menu" id="menu">
                                    <ul class="doc__nav--activation">
                                        <li class="doc__nav--menu__items"><a class="doc__nav--menu__links" href="#docStarted"><i class="doc__nav--menu__icon icofont-address-book"></i> Getting Started</a></li>
                                        <li class="doc__nav--menu__items"><a class="doc__nav--menu__links" href="#themeStructures"><i class="doc__nav--menu__icon icofont-layout"></i> Theme Structures</a>
                                            <ul class="sub-menu nav__sub--menu">
                                                <li class="nav__sub--menu__list"><a class="nav__sub--menu__links" href="#fileStructures"><i class="nav__sub--menu__icon icofont-ui-folder"></i> File Structure</a></li>
                                                <li class="nav__sub--menu__list"><a class="nav__sub--menu__links" href="#frontendfileStructures"><i class="nav__sub--menu__icon icofont-ui-folder"></i>Frontend File Structure</a></li>
                                                <li class="nav__sub--menu__list"><a class="nav__sub--menu__links" href="#htmlStructures"><i class="nav__sub--menu__icon icofont-ui-folder"></i> HTML Structures</a></li>
                                                <li class="nav__sub--menu__list"><a class="nav__sub--menu__links" href="#sassStructures"><i class="nav__sub--menu__icon icofont-ui-folder"></i> Sass Structures</a></li>
                                                <li class="nav__sub--menu__list"><a class="nav__sub--menu__links" href="#cssStructures"><i class="nav__sub--menu__icon icofont-ui-folder"></i> CSS Files and Structure</a></li>
                                                <li class="nav__sub--menu__list"><a class="nav__sub--menu__links" href="#googlefonts"><i class="nav__sub--menu__icon icofont-ui-folder"></i> Google Fonts</a></li>
                                                <li class="nav__sub--menu__list"><a class="nav__sub--menu__links" href="#JavaScriptStructures"><i class="nav__sub--menu__icon icofont-ui-folder"></i> JavaScript Structure</a></li>
                                            </ul>
                                        </li>
                                        <li class="doc__nav--menu__items"><a class="doc__nav--menu__links" href="#changeContents"><i class="doc__nav--menu__icon icofont-addons"></i> Changing Content</a>
                                            <ul class="sub-menu nav__sub--menu">
                                                <li class="nav__sub--menu__list"><a class="nav__sub--menu__links" href="#rootdirectory"><i class="doc__articles--links__icon icofont-ui-folder"></i> Changing CSS Variable </a></li>
                                                <li class="nav__sub--menu__list"><a class="nav__sub--menu__links" href="#brandLogo"><i class="doc__articles--links__icon icofont-ui-folder"></i> Changing Brand Logo </a></li>
                                                <li class="nav__sub--menu__list"><a class="nav__sub--menu__links" href="#productimg"><i class="doc__articles--links__icon icofont-ui-folder"></i> Changing Product Image </a></li>
                                                <li class="nav__sub--menu__list"><a class="nav__sub--menu__links" href="#testimonial"><i class="doc__articles--links__icon icofont-ui-folder"></i> Changing Testimonial Image </a></li>
                                                <li class="nav__sub--menu__list"><a class="nav__sub--menu__links" href="#blogimg"><i class="doc__articles--links__icon icofont-ui-folder"></i> Changing Blog Image </a></li>
                                                <li class="nav__sub--menu__list"><a class="nav__sub--menu__links" href="#copyright"><i class="doc__articles--links__icon icofont-ui-folder"></i> Changing Copyright </a></li>
                                            </ul>
                                        </li>
                                        
                                        <li class="doc__nav--menu__items"><a class="doc__nav--menu__links" href="#bootstrap"><i class="doc__nav--menu__icon icofont-envelope-open"></i>How to customize Bootstrap</a></li>

                                        <li class="doc__nav--menu__items"><a class="doc__nav--menu__links" href="#docCredits"><i class="doc__nav--menu__icon icofont-envelope-open"></i> Sources and Credits</a></li>
                                        <li class="doc__nav--menu__items"><a class="doc__nav--menu__links" href="#changelog"><i class="doc__nav--menu__icon icofont-ebook"></i> Change Log</a></li>
 
                                    </ul>
                                </div>
                            </div>
                        </div>
                        <div class="doc__body--wrapper">
                            <div class="doc__title mb-55">
                                <h1 class="doc__title--text mb-12">Suruchi <span class="doc__title--style">Doc</span>umentation</h1>
                                <p class="doc__title--desc">
                                    Suruchi is a clean, modern, and minimalistic HTML template for your Fashion store. If you want to construct a website for your Fashion store, Suruchi is the best place to start. Featuring clean lines and beautiful typography, this template offers you an easy-to-use platform that’s perfect for presenting your products, abilities, and specialties. Suruchi is a clean, contemporary, and responsive HTML template suitable for everyone in the above-mentioned industry. All you have to do now is build a fantastic website!
                                </p>
                            </div>
                            <div class="doc__services section__mp border-bottom">
                                <div class="row doc__services--row">
                                    <div class="col-lg-4 col-md-6 col-sm-6 doc__services--col">
                                        <div class="doc__services--item text-center mb-20">
                                            <div class="doc__services--icon">
                                                <img class="doc__services--icon__img" src="assets/img/other/javasript.gif" alt="">
                                            </div>
                                            <div class="doc__services--content">
                                                <h4 class="doc__services--sub__title">Vanilla JavaScript</h4>
                                                <p class="doc__services--desc">We used Vanilla JavaScript. No jQuery dependencies. It is a really strong feature to get the best performance.</p>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-lg-4 col-md-6 col-sm-6 doc__services--col">
                                        <div class="doc__services--item text-center mb-20">
                                            <div class="doc__services--icon">
                                                <img class="doc__services--icon__img" src="assets/img/other/doc-services4.png" alt="">
                                            </div>
                                            <div class="doc__services--content">
                                                <h4 class="doc__services--sub__title">Sass Available</h4>
                                                <p class="doc__services--desc">Separate Sass/scss files are available for each single module.You can easily edit the SCSS files.</p>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-lg-4 col-md-6 col-sm-6 doc__services--col">
                                        <div class="doc__services--item text-center mb-20">
                                            <div class="doc__services--icon">
                                                <img class="doc__services--icon__img" src="assets/img/other/bootstrap.png" alt="">
                                            </div>
                                            <div class="doc__services--content">
                                                <h4 class="doc__services--sub__title">Bootstrap compatible</h4>
                                                <p class="doc__services--desc">We've only include the CSS bootstrap grid layout to get better performance. But you can include any element if you want.</p>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-lg-4 col-md-6 col-sm-6 doc__services--col">
                                        <div class="doc__services--item text-center mb-20">
                                            <div class="doc__services--icon">
                                                <img class="doc__services--icon__img" src="assets/img/other/doc-services3.png" alt="">
                                            </div>
                                            <div class="doc__services--content">
                                                <h4 class="doc__services--sub__title">Perfect Responsive</h4>
                                                <p class="doc__services--desc">This is a responsive website. We've made very clean designs for mobile, tablet, laptop, and desktop devices.</p>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-lg-4 col-md-6 col-sm-6 doc__services--col">
                                        <div class="doc__services--item text-center mb-20">
                                            <div class="doc__services--icon">
                                                <img class="doc__services--icon__img" src="assets/img/other/doc-services5.png" alt="">
                                            </div>
                                            <div class="doc__services--content">
                                                <h4 class="doc__services--sub__title">Fast Loading Speed</h4>
                                                <p class="doc__services--desc">suruchi main important feature is faster loading. We've followed the latest lighthouse performance matrix.</p>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-lg-4 col-md-6 col-sm-6 doc__services--col">
                                        <div class="doc__services--item text-center mb-20">
                                            <div class="doc__services--icon">
                                                <img class="doc__services--icon__img" src="assets/img/other/doc-services6.png" alt="">
                                            </div>
                                            <div class="doc__services--content">
                                                <h4 class="doc__services--sub__title">24 Support System</h4>
                                                <p class="doc__services--desc">We provide 24 hours support for our customers. Our main goal is client satisfaction as well as high-quality services provided.</p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="doc__started section__mp border-bottom" id="docStarted">
                                <div class="doc__started--header mb-30">
                                    <h2 class="doc__started--header__title mb-12"><span class="doc__title--style">Ge</span>tting Started</h2>
                                    <p class="doc__started--header__desc"><b>Welcome To Suruchi :</b> Suruchi - Fashion eCommerce HTML Template is a modern as well as a responsive Bootstrap 5 template.</p>
                                </div>
                                <div class="doc__started--about">
                                    <p class="doc__started--about__list"> <b>Item Name :</b> Suruchi Fashion eCommerce HTML Template</p>
                                    <p class="doc__started--about__list"><b>Item Version :</b> v1.0.0</p>
                                    <p class="doc__started--about__list"><b>Author :</b> <a target="_blank" class="doc__started--about__links" href="https://themeforest.net/user/hooktheme">Hooktheme</a></p>
                                    <p class="doc__started--about__list"><b>Support Forum :</b> <a class="doc__started--about__links" href="#">hooktheem@gmail.com</a></p>
                                </div>
                               
                            </div>
                            <div class="doc__started section__mp border-bottom" id="files_include">
                                <h2 class="doc__started--header__title mb-20"><span class="doc__title--style ">Files</span> Included</h2>
                                <div class="doc__started--header mb-30 card_body">
                                    <blockquote>
                                        Do not directly upload the zip file you downloaded from Themeforest. To begin, unzip the ThemeForest file you just downloaded.

                                    </blockquote>
                                    <a class="glightbox" href="assets/img/other/files_include.png" data-gallery="installation"><img class="doc__html--structures" src="assets/img/other/files_include.png" alt="html-structures-img"></a> 
                                </div>
                               
                            </div>
                            <div class="doc__structures section__mp border-bottom" id="themeStructures">
                                <h2 class="doc__structures--title mb-30"><span class="doc__title--style">Te</span>mplate Structures</h2>
                                <div class="doc__structures--articles mb-30">
                                    <ul>
                                        <li class="structures__articles--list"><a class="doc__structures--articles__links" href="#fileStructures"><i class="doc__articles--links__icon icofont-ui-folder"></i>Files Structures</a></li>
                                        <li class="structures__articles--list"><a class="doc__structures--articles__links" href="#frontendfileStructures"><i class="doc__articles--links__icon icofont-ui-folder"></i>Frontend Files Structure</a></li>
                                        <li class="structures__articles--list"><a class="doc__structures--articles__links" href="#htmlStructures"><i class="doc__articles--links__icon icofont-ui-folder"></i> HTML Structures</a></li>
                                        <li class="structures__articles--list"><a class="doc__structures--articles__links" href="#sassStructures"><i class="doc__articles--links__icon icofont-ui-folder"></i> Sass Files Structure</a></li>
                                        <li class="structures__articles--list"><a class="doc__structures--articles__links" href="#cssStructures"><i class="doc__articles--links__icon icofont-ui-folder"></i> CSS Files and Structure</a></li>
                                        <li class="structures__articles--list"><a class="doc__structures--articles__links" href="#googlefonts"><i class="doc__articles--links__icon icofont-ui-folder"></i> Google Fonts</a></li>
                                        <li class="structures__articles--list"><a class="doc__structures--articles__links" href="#JavaScriptStructures"><i class="doc__articles--links__icon icofont-ui-folder"></i> JavaScript Structure</a></li>
                                    </ul>
                                </div>
                                <div class="doc__structures--step section__mp border-bottom" id="fileStructures">
                                    <div class="file__structures--header mb-30">
                                        <h3 class="doc__structures--sub__title mb-10"><span class="doc__title--style">File</span> Structures</h3>
                                        <p>suruchi Files Structure. You can easily find any file.</p>
                                    </div>
                                    <div class="file__structures--wrapper">
                                        <div class="file__structures--list mb-30">
                                            <h4 class="file__structures--sub__title mb-15"><i class="doc__articles--links__icon icofont-ui-folder"></i> HTML Files</h4>
                                            <ul>
                                                <li class="file__structures--items"><i class="doc__credits--icons icofont-tick-mark"></i> 32 html pages </li>
                                            </ul>
                                        </div>
                                        <div class="file__structures--list mb-30">
                                            <h4 class="file__structures--sub__title mb-15"><i class="doc__articles--links__icon icofont-ui-folder"></i> <span class="file__structures--assets__name">assets/css</span> - Css Folder</h4>
                                            <ul>
                                                <li class="file__structures--items"><i class="doc__credits--icons icofont-tick-mark"></i>  global.scss </li>
                                                <li class="file__structures--items"><i class="doc__credits--icons icofont-tick-mark"></i>  header.scss </li>
                                                <li class="file__structures--items"><i class="doc__credits--icons icofont-tick-mark"></i>  slider.scss </li>
                                                <li class="file__structures--items"><i class="doc__credits--icons icofont-tick-mark"></i>  product.scss </li>
                                                <li class="file__structures--items"><i class="doc__credits--icons icofont-tick-mark"></i>  banner.scss </li>
                                                <li class="file__structures--items"><i class="doc__credits--icons icofont-tick-mark"></i>  blog.scss </li>
                                                <li class="file__structures--items"><i class="doc__credits--icons icofont-tick-mark"></i>  testimonial.scss </li>
                                                <li class="file__structures--items"><i class="doc__credits--icons icofont-tick-mark"></i>  newsletter.scss </li>
                                                <li class="file__structures--items"><i class="doc__credits--icons icofont-tick-mark"></i>  shipping.scss </li>
                                                <li class="file__structures--items"><i class="doc__credits--icons icofont-tick-mark"></i>  instagram.scss </li>
                                                <li class="file__structures--items"><i class="doc__credits--icons icofont-tick-mark"></i>  footer.scss</li>
                                                <li class="file__structures--items"><i class="doc__credits--icons icofont-tick-mark"></i>   quickview.scss</li>
                                                <li class="file__structures--items"><i class="doc__credits--icons icofont-tick-mark"></i>   accordion.scss</li>
                                                <li class="file__structures--items"><i class="doc__credits--icons icofont-tick-mark"></i>   portfolio.scss</li>
                                                <li class="file__structures--items"><i class="doc__credits--icons icofont-tick-mark"></i>   brand-logo.scss</li>
                                                <li class="file__structures--items"><i class="doc__credits--icons icofont-tick-mark"></i>   breadcrumb.scss</li>
                                                <li class="file__structures--items"><i class="doc__credits--icons icofont-tick-mark"></i>   about.scss</li>
                                                <li class="file__structures--items"><i class="doc__credits--icons icofont-tick-mark"></i>   shop.scss</li>
                                                <li class="file__structures--items"><i class="doc__credits--icons icofont-tick-mark"></i>   product-details.scss</li>
                                                <li class="file__structures--items"><i class="doc__credits--icons icofont-tick-mark"></i>   blog-details.scss</li>
                                                <li class="file__structures--items"><i class="doc__credits--icons icofont-tick-mark"></i>   contact.scss</li>
                                                <li class="file__structures--items"><i class="doc__credits--icons icofont-tick-mark"></i>   cart-page.scss</li>
                                                <li class="file__structures--items"><i class="doc__credits--icons icofont-tick-mark"></i>   checkout.scss</li>
                                                <li class="file__structures--items"><i class="doc__credits--icons icofont-tick-mark"></i>   my-account.scss</li>
                                                <li class="file__structures--items"><i class="doc__credits--icons icofont-tick-mark"></i>   404.scss</li>
                                                <li class="file__structures--items"><i class="doc__credits--icons icofont-tick-mark"></i>   login.scss</li>
                                                <li class="file__structures--items"><i class="doc__credits--icons icofont-tick-mark"></i>   compare.scss</li>
                                                <li class="file__structures--items"><i class="doc__credits--icons icofont-tick-mark"></i>   faq.scss</li>
                                                <li class="file__structures--items"><i class="doc__credits--icons icofont-tick-mark"></i>   preloader.scss</li>
                                            </ul>
                                        </div>
                                        <div class="file__structures--list mb-30">
                                            <h4 class="file__structures--sub__title mb-15"><i class="doc__articles--links__icon icofont-ui-folder"></i> <span class="file__structures--assets__name">assets/css</span> - Css Folder</h4>
                                            <ul>
                                                <li class="file__structures--items"><i class="doc__credits--icons icofont-tick-mark"></i> bootstrap.min.css </li>
                                                <li class="file__structures--items"><i class="doc__credits--icons icofont-tick-mark"></i> swiper-bundle.min.css </li>
                                                <li class="file__structures--items"><i class="doc__credits--icons icofont-tick-mark"></i> glightbox.min.css </li>
                                                <li class="file__structures--items"><i class="doc__credits--icons icofont-tick-mark"></i> style.css </li>
                                            </ul>
                                        </div>
                                        <div class="file__structures--list">
                                            <h4 class="file__structures--sub__title mb-15"><i class="doc__articles--links__icon icofont-ui-folder"></i> <span class="file__structures--assets__name">assets/js</span> - Js Folder</h4>
                                            <ul>
                                                <li class="file__structures--items"><i class="doc__credits--icons icofont-tick-mark"></i> bootstrap.min.js </li>
                                                <li class="file__structures--items"><i class="doc__credits--icons icofont-tick-mark"></i> popper.js </li>
                                                <li class="file__structures--items"><i class="doc__credits--icons icofont-tick-mark"></i> swiper-bundle.min.js </li>
                                                <li class="file__structures--items"><i class="doc__credits--icons icofont-tick-mark"></i> glightbox.min.js </li>
                                                <li class="file__structures--items"><i class="doc__credits--icons icofont-tick-mark"></i> script.js </li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                                <div class="doc__structures--step section__mp border-bottom" id="frontendfileStructures">
                                    <h3 class="doc__structures--sub__title mb-20"><span class="doc__title--style">Files</span> Structure</h3>
                                    <a class="glightbox" href="assets/img/other/html-body.png" data-gallery="html-structures"><img class="doc__html--structures" src="assets/img/other/file-structures.png" alt="html-structures-img"></a> 
                                </div>
                                <div class="doc__structures--step section__mp border-bottom" id="htmlStructures">
                                    <h3 class="doc__structures--sub__title mb-20"><span class="doc__title--style">HTML</span> Structure</h3>
                                    <a class="glightbox" href="assets/img/other/html-body.png" data-gallery="html-structures"><img class="doc__html--structures" src="assets/img/other/html-body.png" alt="html-structures-img"></a> 
                                </div>
                                <div class="doc__structures--step section__mp border-bottom" id="sassStructures">
                                    <h3 class="doc__structures--sub__title mb-20"><span class="doc__title--style">Sass</span> Files Structure</h3>
                                    <a class="glightbox" href="assets/img/other/css-file.png" data-gallery="html-structures"><img class="doc__html--structures" src="assets/img/other/sass-html.png" alt="html-structures-img"></a> 
                                </div>
                                <div class="doc__structures--step section__mp border-bottom" id="cssStructures">
                                    <h3 class="doc__structures--sub__title mb-20"><span class="doc__title--style">CSS</span> Files Structure</h3>
                                    <a class="glightbox" href="assets/img/other/css-file.png" data-gallery="html-structures"><img class="doc__html--structures" src="assets/img/other/css-file.png" alt="html-structures-img"></a> 
                                </div>
                                <div class="doc__structures--step section__mp border-bottom" id="googlefonts">
                                    <h3 class="doc__structures--sub__title mb-20"><span class="doc__title--style">Google </span> Fonts Include</h3>
                                    <a class="glightbox" href="assets/img/other/css-file.png" data-gallery="html-structures"><img class="doc__html--structures" src="assets/img/other/google-gonts.png" alt="html-structures-img"></a> 
                                </div>
                                <div class="doc__structures--step" id="JavaScriptStructures">
                                    <h3 class="doc__structures--sub__title mb-12"><span class="doc__title--style">JavaScript</span> Structure</h3>
                                    <a class="glightbox" href="assets/img/other/javascrip-filet.png" data-gallery="html-structures"><img class="doc__html--structures" src="assets/img/other/javascrip-filet.png" alt="html-structures-img"></a> 
                                </div>
                            </div>
                            <div class="doc__changing section__mp border-bottom" id="changeContents">
                                <div class="doc__changing--header mb-30">
                                    <h2 class="doc__changing--title mb-12"><span class="doc__title--style">Cha</span>nging Contents</h2>
                                    <p class="doc__title--desc">Lorem ipsum dolor sit amet consectetur adipisicing elit. Unde quaerat molestias dicta consequatur excepturi nulla fugiat, <br> odio pariatur voluptatum perspiciatis eligendi, molestiae ad sunt commodi?</p>
                                </div>
                                <div class="changing__content--list section__mp border-bottom">
                                    <ul>
                                        <li class="structures__articles--list"><a class="doc__structures--articles__links" href="#rootdirectory"><i class="doc__articles--links__icon icofont-ui-folder"></i> Changing CSS Variable </a></li>
                                        <li class="structures__articles--list"><a class="doc__structures--articles__links" href="#brandLogo"><i class="doc__articles--links__icon icofont-ui-folder"></i> Changing Brand Logo </a></li>
                                        <li class="structures__articles--list"><a class="doc__structures--articles__links" href="#productimg"><i class="doc__articles--links__icon icofont-ui-folder"></i> Changing Product Image </a></li>
                                        <li class="structures__articles--list"><a class="doc__structures--articles__links" href="#testimonial"><i class="doc__articles--links__icon icofont-ui-folder"></i> Changing Testimonial Image </a></li>
                                        <li class="structures__articles--list"><a class="doc__structures--articles__links" href="#blogimg"><i class="doc__articles--links__icon icofont-ui-folder"></i> Changing BLog Image </a></li>
                                        <li class="structures__articles--list"><a class="doc__structures--articles__links" href="#copyright"><i class="doc__articles--links__icon icofont-ui-folder"></i> Changing  Copyright </a></li>
                                    </ul>
                                </div>
                                <div class="changing__content--wrapper">
                                    <div class="changing__content--step section__mp border-bottom" id="rootdirectory">
                                        <h3 class="changing__content--sub__title mb-20"><span class="doc__title--style">Changing</span> CSS Global Variable</h3>
                                        <a class="glightbox" href="assets/img/other/root-directory.png" data-gallery="changing-content"><img class="changing__content--img" src="assets/img/other/root-directory.png" alt="changing-content-img"></a> 
                                        <h3 class="changing__content--sub__title mb-20 mt-50"><span class="doc__title--style">Changing</span> Color Scheme</h3>
                                        <a class="glightbox" href="assets/img/other/color_scheme.png" data-gallery="changing-content"><img class="changing__content--img" src="assets/img/other/color_scheme.png" alt="changing-content-img"></a> 
                                    </div>
                                    <div class="changing__content--step section__mp border-bottom" id="brandLogo">
                                        <h3 class="changing__content--sub__title mb-20"><span class="doc__title--style">Changing</span> Brand Logo</h3>
                                        <a class="glightbox" href="assets/img/other/logo-html.png" data-gallery="changing-content"><img class="changing__content--img" src="assets/img/other/logo-html.png" alt="changing-content-img"></a> 
                                    </div>
                                    <div class="changing__content--step section__mp border-bottom" id="productimg">
                                        <h3 class="changing__content--sub__title mb-20"><span class="doc__title--style">Changing</span> Product Image</h3>
                                        <a class="glightbox" href="assets/img/other/product-html.png" data-gallery="changing-content"><img class="changing__content--img" src="assets/img/other/product-html.png" alt="changing-content-img"></a> 
                                    </div>
                                    <div class="changing__content--step section__mp border-bottom" id="testimonial">
                                        <h3 class="changing__content--sub__title mb-20"><span class="doc__title--style">Changing</span> Testimonial Image</h3>
                                        <a class="glightbox" href="assets/img/other/testimonial-html.png" data-gallery="changing-content"><img class="changing__content--img" src="assets/img/other/testimonial-html.png" alt="changing-content-img"></a> 
                                    </div>
                                    <div class="changing__content--step section__mp border-bottom" id="blogimg">
                                        <h3 class="changing__content--sub__title mb-20"><span class="doc__title--style">Changing</span> Blog Image</h3>
                                        <a class="glightbox" href="assets/img/other/blog-html.png" data-gallery="changing-content"><img class="changing__content--img" src="assets/img/other/blog-html.png" alt="changing-content-img"></a> 
                                    </div>
                                    <div class="changing__content--step" id="copyright">
                                        <h3 class="changing__content--sub__title mb-20"><span class="doc__title--style">Changing</span> Copyright</h3>
                                        <a class="glightbox" href="assets/img/other/copyright-html.png" data-gallery="changing-content"><img class="changing__content--img" src="assets/img/other/copyright-html.png" alt="changing-content-img"></a> 
                                    </div>
                                </div>
                            </div>
                            
                            <div class="doc__credits section__mp border-bottom" id="bootstrap">
                                <div class="doc__credits--header mb-30">
                                    <h2 class="doc__structures--title mb-12"><span class="doc__title--style">How</span> to customize bootstrap</h2>
                                </div>
                                <div class="doc__credits--wrapper">
                                    <p>We've only include the CSS bootstrap grid layout to get better performance. But you can include any element if you want.</p>
                                    <p><b>To include Bootstrap Core CSS and JS files you need to follow 2 steps,</b></p>
                                    <ol class="boostrap__list">
                                        <li>You need to go to HTML file <b>&#60/head&#62;</b> end tag
                                            <br>
                                            <a class="glightbox mt-20" href="assets/img/other/bootstarp_css_comment.png" data-gallery="boostarp-comment"><img class="changing__content--img" src="assets/img/other/bootstarp_css_comment.png" alt="changing-content-img"></a> 
                                        </li>
                                        <li class="mt-20">You need to go to HTML file <b>&#60/body&#62;</b> end tag
                                            <br>
                                            <a class="glightbox mt-20" href="assets/img/other/bootstarp_js_comment.png" data-gallery="boostarp-comment"><img class="changing__content--img" src="assets/img/other/bootstarp_js_comment.png" alt="changing-content-img"></a> 
                                        </li>
                                    </ol>
                                </div>
                            </div>

                            <div class="doc__credits section__mp border-bottom" id="docCredits">
                                <div class="doc__credits--header mb-30">
                                    <h2 class="doc__structures--title mb-12"><span class="doc__title--style">Sou</span>rces and Credits</h2>
                                </div>
                                <div class="doc__credits--wrapper">
                                    <ul>
                                        <li class="doc__credits--list"><i class="doc__credits--icons icofont-tick-mark"></i> <a class="doc__credits--links" href="https://fonts.google.com"> Google Fonts</a></li>
                                        <li class="doc__credits--list"><i class="doc__credits--icons icofont-tick-mark"></i> <a class="doc__credits--links" href="https://swiperjs.com/demos">Swiper Slider</a></li>
                                        <li class="doc__credits--list"><i class="doc__credits--icons icofont-tick-mark"></i> <a class="doc__credits--links" href="https://biati-digital.github.io/glightbox">glightbox</a></li>
                                    </ul>
                                </div>
                            </div>
                            <div class="doc__changelog section__mp border-bottom" id="changelog">
                                <div class="doc__changelog--header mb-50">
                                    <h2 class="doc__changelog--title mb-12"><span class="doc__title--style">Cha</span>nge Log</h2>
                                </div>

                                <div class="single__changelog mb-30">
                                    <h3 class="changelog__title">02-23-2022</h3>

                                    <ul class="changelog__list">
                                        <li class="changes__list_item"><span class="new">Release</span> Initial release</li>
                                    </ul>
                                </div>

                                <div class="single__changelog mb-30">
                                    <h3 class="changelog__title">03-11-2022</h3>
                                    <ul class="changelog__list">
                                        <li class="changes__list_item mb-10"><span class="new">New</span> Newsletter Popup Added</li>
                                        <li class="changes__list_item"><span class="fixed">Fixed</span> CSS Issue</li>
                                    </ul>
                                </div>

                                <div class="single__changelog mb-30">
                                    <h3 class="changelog__title">04-05-2022</h3>
                                    <ul class="changelog__list">
                                        <li class="changes__list_item"><span class="fixed">Fixed</span> CSS Issue</li>
                                    </ul>
                                </div>
                                <div class="single__changelog mb-30">
                                    <h3 class="changelog__title">05-17-2022</h3>
                                    <ul class="changelog__list">
                                        <li class="changes__list_item"><span class="new">Updated</span> Bootstrap v5.0.2</li>
                                    </ul>
                                </div>
                                <div class="single__changelog ">
                                    <h3 class="changelog__title">05-18-2022</h3>
                                    <ul class="changelog__list">
                                        <li class="changes__list_item"><span class="fixed">Fixed</span> CSS Issue</li>
                                    </ul>
                                </div>
                                
                            </div>
                            
                        </div>
                    </div>
                </div>
            </div>
        </div>
   </section>
   <!-- End doc body -->

   <!-- start footer area -->
   <footer class="doc__footer">
        <div class="container">
            <div class="row">
                <div class="col-12">
                    <div class="doc__footer--inner d-flex justify-content-between align-items-center">
                        <div class="footer__copyright">
                            <p class="footer__copyright--text">Copyright © 2022 <a class="footer__copyright--link" href="#">Suruchi</a> . all right reserved</p>
                        </div>
                        <div class="footer__paypal">
                            <ul class="d-flex">
                                <li class="footer__paypal--list"><a class="footer__paypal--link" href="#"><img class="footer__paypal--link__img" src="assets/img/other/footer-paypal1.png" alt=""></a></li>
                                <li class="footer__paypal--list"><a class="footer__paypal--link" href="#"><img class="footer__paypal--link__img" src="assets/img/other/footer-paypal2.png" alt=""></a></li>
                                <li class="footer__paypal--list"><a class="footer__paypal--link" href="#"><img class="footer__paypal--link__img" src="assets/img/other/footer-paypal3.png" alt=""></a></li>
                                <li class="footer__paypal--list"><a class="footer__paypal--link" href="#"><img class="footer__paypal--link__img" src="assets/img/other/footer-paypal4.png" alt=""></a></li>
                            </ul>
                        </div>
                    </div>

                </div>
            </div>
        </div>
   </footer>
   <!-- end footer area -->

   <!-- Scroll top bar -->
   <button aria-label="scroll top btn" id="scroll__top"><svg xmlns="http://www.w3.org/2000/svg" class="ionicon" viewBox="0 0 512 512"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="48" d="M112 244l144-144 144 144M256 120v292"/></svg></button>

    
  <!-- All Script JS Plugins here  -->
  <script src="assets/js/vendor/jquery-3.5.1.min.js"></script>
  <script src="assets/js/vendor/popper.min.js"></script>
  <script src="assets/js/vendor/bootstrap.min.js"></script>
  <script src="assets/js/plugins/mmenu.js"></script>
  <script src="assets/js/plugins/glightbox.min.js"></script>

  <!-- Customscript js -->
  <script src="assets/js/script.js"></script>
  
</body>
</html>